<template>
  <button
      hover-class="none"
      :class="classNameList"
      :size="props.size"
      :plain="props.plain || props.transparent"
      :disabled="props.disabled || props.loading"
      :loading="props.loading"
      :priority="props.priority"
      :scope="props.scope"
      :open-type="props.openType"
      :session-from="props.sessionFrom"
      :show-message-card="props.showMessageCard"
      :send-message-path="props.sendMessagePath"
      :send-message-title="props.sendMessageTitle"
      :send-message-img="props.sendMessageImg"
      :style="props.styles"
      :business-id="props.businessId"
      :data-id="props.dataId"
      @click.stop="onClick"
  >
    <slot v-if="size !== 'medium' || loading !==true" />
  </button>
</template>

<script setup>

import {computed} from "vue";

const props = defineProps({
  size: {
    type: String,
    default: 'medium'
  },
  styles: {
    type: String,
    default: ''
  },
  // 按钮类型 主要，默认， primary default
  type: {
    type: String,
    default: 'primary'
  },
  // 按钮优先级 次要，次次要 primary secondary secondary-secondary
  priority: {
    type: String,
    default: 'primary'
  },
  lang: {
    type: String,
    default: 'zh_CN'
  },
  scope: {
    type: String,
    default: ''
  },
  round: {
    type: Boolean,
    default: false
  },
  plain: {
    type: Boolean,
    default: false
  },
  border: {
    type: Boolean,
    default: false
  },
  // 按钮是否镂空，背景色透明
  transparent: {
    type: Boolean,
    default: false
  },
  disabled: {
    type: Boolean,
    default: false
  },
  loading: {
    type: Boolean,
    default: false
  },
  showMessageCard: {
    type: Boolean,
    default: false
  },
  sendMessagePath: {
    type: String,
    default: ''
  },
  sendMessageTitle: {
    type: String,
    default: ''
  },
  sendMessageImg: {
    type: String,
    default: ''
  },
  sessionFrom: {
    type: String || null,
    default: ''
  },
  businessId: {
    type: String || Number,
    default: ''
  },
  openType: {
    type: String,
    default: ''
  },
  dataId: { // 按钮传值
    type: String,
    default: ''
  },
  disabledType: {
    type: String || Number,
    default: ''
  }
})
const emits = defineEmits(['click'])
const classNameList = computed(() => {
  const name = ['x-button'];
  name.push(`is-${props.size}`);
  if (props.transparent) {
    // 按钮是否镂空，背景色透明
    name.push('is-transparent');
  } else {
    name.push(`is-${props.type}`);
  }
  if (props.size) {
    name.push(`is-${props.size}`);
  }
  // 按钮优先级
  if (props.priority) {
    name.push(`is-${props.priority}`);
  }
  if (props.plain) {
    name.push('is-plain');
  }
  if (props.round) {
    name.push('is-round');
  }
  if (props.border) {
    name.push('is-border');
  }
  if (props.disabled || props.loading) {
    name.push('is-disabled');
    if (props.disabledType === 1) {
      name.push('is-disabled-1');
    }
  }
  if (props.disabled && props.priority) {
    name.push(`is-disabled-${props.priority}`);
  }
  return name.join(' ');
})
function onClick() {
  emits('click');
}
</script>

<style lang="scss">
.x-button{
  color: inherit; word-break: break-all; border-radius: 8px; text-align: center; vertical-align: middle;
  &:after{ display: none; }
  // 默认
  &.is-default{
    background-color: $uni-color-white; color: $uni-text-color;
    &:active{
      background-color: $uni-color-white;
    }
    &.is-plain{
      background: $uni-color-white; border: 2px solid #ddd !important; color: $uni-text-color;
      &:active{ background: $uni-color-white; }
    }
  }
  // 主要
  &.is-primary{
    background-color: $uni-color-primary; background: $uni-color-primary; color: #fff;
    &:active{
      background-color: $uni-color-secondary; background: #BC3619;
    }
  }
  // 微信
  &.is-wechat{
    background-color: #07C160; color: #fff;
    &:active{
      opacity: .9; background-color: #07C160;
    }
  }

  &.is-linear{
    background:linear-gradient(90deg,rgba(255,97,157,1),rgba(255,29,36,1)); color: #fff;
    &:active{
      background:linear-gradient(90deg,rgba(255,29,36,1),rgba(255,97,157,1));
    }
  }

  // 大号
  &.is-large{
    height: $uni-button-height-size-lg; line-height: $uni-button-height-size-lg; font-size: $uni-font-size-lg;
    &.is-round{ border-radius: $uni-button-height-size-lg;}
    &.is-border{ line-height: $uni-button-height-size-lg; }
  }
  // 中号
  &.is-medium{
    height: $uni-button-height-size-base; line-height: $uni-button-height-size-base; font-size: $uni-font-size-base;
    &.is-round{ border-radius: $uni-button-height-size-base;}
    &.is-border{ line-height: $uni-button-height-size-base; }
  }
  // 小号
  &.is-small{
    height: $uni-button-height-size-sm; line-height: $uni-button-height-size-sm; font-size: $uni-font-size-sm;
    &.is-round{ border-radius: $uni-button-height-size-sm;}
    &.is-border{ line-height: $uni-button-height-size-sm; }
  }
  // 超小号
  &.is-mini{
    height: $uni-button-height-size-mini; line-height: $uni-button-height-size-mini; font-size: $uni-font-size-mini;padding: 0 4px 0 4px;
    &.is-round{ border-radius: $uni-button-height-size-mini;}
    &.is-border{ line-height: $uni-button-height-size-mini - 4rpx; }
  }

  &.is-plain{
    background: transparent !important; border: 2px solid $uni-color-primary !important; color: $uni-color-primary;
    &:active{ background: transparent; }
  }

  &.is-disabled,
  &.is-disabled:active{
    background: $uni-color-primary-light-8 !important; background-color: $uni-color-primary-light-8 !important; color: #FFFFFF !important;
  }
  &.is-disabled-1,
  &.is-disabled-1:active{
    background: #F2F3F5 !important; background-color: #F2F3F5 !important; color: #bbbbbb !important;
  }
  &.is-transparent{
    padding: 0; margin: 0; width: auto; border: 0; height: auto; line-height: inherit; font-size: inherit; border-radius: 0 !important;
    &:active{
      background-color: transparent;
    }
  }

  // 优先级按钮
  // 次要按钮
  &.is-secondary{
    background: $uni-color-white;color: $uni-color-primary;border: 2px solid $uni-color-primary !important;
    &:active{ background: #FEF0ED; }
  }
  &.is-disabled-secondary{
    color: $uni-color-primary !important;background: $uni-color-white !important;opacity: 0.7;
    &:active{ color: $uni-color-primary !important;background: $uni-color-white !important;}
  }
  // 次次要按钮
  &.is-secondary-secondary{
    background: $uni-color-white;color: $uni-color-default;border: 2px solid $uni-border-color1 !important;
    &:active{ background: #F7F8FA; }
  }
  &.is-disabled-secondary-secondary{
    color: #CCCCCC !important;background: #F7F8FA !important;
    &:active{ color: #CCCCCC !important;background: #F7F8FA !important;}
  }

  // cover
  &.is-cover{
    margin: 0;border: 0;padding: 0;height:100%;background: transparent;position: absolute;top: 0;left: 0;right: 0;bottom: 0;z-index: 1;
    &:active{
      background: transparent;
    }
  }
}
</style>
